<!DOCTYPE html>
<html>
<head>
	<title>vue demo</title>
</head>
<body >
	<section id="section-1">
		<h1>提示</h1>
		<blockquote>
			1、所有需要监听的数据，比如下面的a,属性， 必须现在data里面预设，否则有可能监听不到
			2. 初始化的步骤，
			监听(初始化data属性，params属性，computed属性)-> 编译模板(编译指令系统，如v-modal,:if) -> 挂到DOM(生成html，替换模板内容) -> 变化时更新
		</blockquote>
		<h3>data数据绑定，监听后，改变自动渲染</h3>
		<select v-model="a">
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
		</select>
		{{a}}
		
		<hr>
		<h3>checkes[] ,input[checkbox] 多选</h3>
		<label> <input type="checkbox" v-model="checkes" value="1"> 1</label>
		<label> <input type="checkbox" v-model="checkes" value="2"> 2</label>
		<label> <input type="checkbox" v-model="checkes" value="3"> 3</label>
		<br>
		{{checkes.toString()}}

		<hr>
		<h3>watch a: 自动触发函数</h3>
		<p>基于观察者模式，初始化后</p>
		<p v-html="tips"></p>
		
		<hr>
		<h3>事件监听</h3>
		<p>v-on用与绑定事件{可缩写v-on:click, 为@click}， v-bind用于绑定节点属性{可缩写v-bind:href, :href}</p>
		<p>v-on.click.stop, 停止事件传播</p>
		<p>v-on.submit.prevent, 提交事件不会重载页面， 阻止默认行为</p>
				
		<p>v-on:click.capture 捕获, v-on:click.self</p>
	</section>>
		
	
	<script src="https://cdn.bootcss.com/vue/2.4.4/vue.js"></script>
	<script type="text/javascript">
		// sectino-1
		var vm = new Vue({
			el:"#section-1",
			data:{ 
				a: 1,
				checkes:[], 
				tips:""
			},
			watch:{
				a:()=>{
					vm.tips += Date.now()+": 我触发了watch 监听事件<br>";
					console.log(this.tips)
				}
			}
		})
	</script>

</script>
</body>
</html>